<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .warp {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid;
    }

    .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: violet;
      transition: all 1s ease;
    }

    .btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  </style>
</head>

<body>
  <div class="warp">
    <div class="box"></div>
    <button class="btn">点击移动</button>
  </div>
  <script>
    // 获取元素
    let ele = document.querySelector(".box");
    let btn = document.querySelector(".btn");
    // 定义一个移动函数
    function move (ele, direction, distance) { // 元素   移动方向  移动距离
      return new Promise((resolve, reject) => {
        ele.style[direction] = distance;
        // 监听元素过渡结束
        ele.ontransitionend = function () {
          resolve("执行完毕了");
        }
      })
    }
    // 按钮点击之后触发方块移动
    btn.onclick = function () {
      move(ele, "left", "300px").then((res) => {
        console.log("向右的移动" + res + 1);
        return move(ele, "top", "300px");
      }).then((res) => {
        console.log("向下的移动" + res + 2);
        return move(ele, "left", "0px");
      }).then((res) => {
        console.log("向左的移动" + res + 3);
        return move(ele, "top", "0px");
      }).then((res) => {
        console.log("向上的移动" + res + 4);
      })
    }

  </script>
</body>

</html>